<template>
  <div class="container">
    <view class="txt"> 矿难进度： </view>
    <div class="g-progress" :style="'width:' + +percent * 100 + '%'">
      <view class="intxt"> {{ (+percent * 100).toFixed(1) }}% </view>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      percent: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {}
    },
    onLaunch: function () {
      console.log('App Launch')
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    },
  }
</script>

<style lang="scss">
  .container {
    width: 360rpx;
    border: 1px solid #eee;
    border-radius: 25px;
    position: relative;
    background: #f2f2f2;
    height: 50rpx;
  }
  .txt {
    position: absolute;
    top: 0;
    left: -100rpx;
    color: #333;
    font-size: 20rpx;
    height: 50rpx;
    line-height: 50rpx;
  }
  .intxt {
    position: absolute;
    top: 0;
    left: 10rpx;
    color: #333;
    font-size: 20rpx;
    height: 50rpx;
    line-height: 50rpx;
  }
  .g-progress {
    position: absolute;
    left: 0;
    margin: auto;
    height: 50rpx;
    border-radius: 25px;
    background: linear-gradient(
      45deg,
      #fdd017,
      #a67c00,
      #fdd017,
      #fdd017,
      #a67c00
    );
    background-size: 200% 200%;
    animation: gradientBG 5s ease infinite;
  }
  @keyframes gradientBG {
    0% {
      background-position: 0% 60%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 70%;
    }
  }
</style>
